@import "../style/theme/color";

:host {
  padding: 0 5px;
  display: block;
  line-height: 36px;
}
.devui-radio {
  &.disabled {
    cursor: not-allowed;
    opacity: 0.3;
  }
  font-size: 14px;
  line-height: 1.42857143;
  font-weight: normal;
  cursor: pointer;
  color: $dark1;
  margin: 0 auto;
  svg {
    .outer {
      stroke: $gray1;
      fill: transparent;
    }
    .inner {
      fill: $focus1;
    }
  }
  &:hover:not(.disabled) svg .outer {
    stroke: $hover-control;
  }

  &:active:not(.disabled),
  &:focus:not(.disabled) {
    svg .outer {
      stroke: $focus2;
    }
  }
  &.active {
    svg {
      .outer {
        opacity: 1;
        stroke: $focus1;
        transition: stroke 50ms cubic-bezier(0.755, 0.05, 0.855, 0.06);
      }

      .inner {
        opacity: 1;
        transform: scale(1);
        transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1),
          opacity 200ms cubic-bezier(0.23, 1, 0.32, 1);
      }
    }
    &:not(.disabled) .devui-radio-material {
      &:hover {
        svg {
          .outer {
            stroke: $hover-control;
          }
          .inner {
            fill: $hover-control;
          }
        }
      }
      &:active,
      &:focus {
        svg {
          .outer {
            stroke: $focus2;
          }
          .inner {
            fill: $focus2;
          }
        }
      }
    }
  }
  .outer {
    opacity: 1;
    transition: stroke 50ms cubic-bezier(0.755, 0.05, 0.855, 0.06);
  }

  .inner {
    opacity: 0;
    transform: scale(0);
    transform-origin: 50% 50%;
    transition: transform 200ms cubic-bezier(0.755, 0.05, 0.855, 0.06),
      opacity 200ms cubic-bezier(0.755, 0.05, 0.855, 0.06);
  }
  .devui-radio-material {
    vertical-align: middle;
    position: relative;
    display: inline-block;
    overflow: hidden;
    height: 16px;
    width: 16px;
    user-select: none;
    transform: translateY(-1px);
  }

  .devui-radio-label {
    color: $dark1;
    margin-left: 8px;
  }

  .devui-radio-input {
    opacity: 0;
    z-index: -1;
    width: 0;
    height: 0;
    display: none;
    overflow: hidden;
    pointer-events: none;
  }
}
